<template>
	<div class="mark-video-main">
		<template v-if="fileType === 'agent-recorg'">
			<p class="agent-recorg-text">{{ option.userName ? '录屏坐席：' + option.userName : '' }}</p></template
		>
		<template v-if="fileType === 'regional-screen'">
			<p class="agent-recorg-text">{{ option.userName ? '区域录屏：' + option.userName : '' }}</p></template
		>
		<video v-bind:id="option.id" class="video-js vjs-default-skin vjs-big-play-centered">
			<source :src="option.url" type="video/mp4" />
		</video>
		<div class="full-screen" @click="openFullScreen(option.id)">
			<img src="@/assets/img/icon/fullScreen-icon.png" alt="" />
		</div>
		<!-- class="full-screen-img" -->
		<LargeMarkerVideo v-if="showFullScreen" :option="option" @closeLargeVideo="closeLargeVideo" />
	</div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-markers';
import LargeMarkerVideo from './LargeMarkerVideo.vue';
export default {
	name: 'MarkerVideo',
	props: {
		option: {
			type: Object,
			required: true,
			default: () => {}
		},
		videoConfig: {
			type: Object,
			required: true,
			default: () => {}
		},
		fileType: {
			type: String,
			required: true,
			default: () => ''
		}
		// filedata: {
		// 	type: Array,
		// 	required: true,
		// 	default: () => []
		// }
	},
	components: { LargeMarkerVideo },
	data() {
		return {
			// videoSrc: '',
			player: '',
			showFullScreen: false
		};
	},
	mounted() {
		console.log(this.option);
		this.$nextTick(() => {
			// 初始化videojs
			this.player = videojs(this.option.id, {
				controls: true, // 必填，显示各控制组件
				autoplay: false, // 是否自动播放
				preload: 'auto', // 预加载
				// poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面
				width: this.videoConfig.width ? this.videoConfig.width : '600px',
				height: this.videoConfig.height ? this.videoConfig.height : '400px',
				loop: false, // 是否循环播放
				controlBar: {
					volumePanel: {
						inline: false // 将音量横向改为纵向
					},
					// 隐藏全屏按钮
					fullscreenToggle: false
				},
				//双击禁用全屏
				userActions: {
					doubleClick: false
				},
				muted: false,
				playbackRates: [0.5, 1, 1.5, 2, 3] // 定义播放速度列表
			});
			// console.log('filedata', this.filedata);
			// console.log('optionsMarkerVideo:', this.option);
			// 初始化不展示默认标记点
			let timePoint = this.option.markers.filter(item => item.time);
			this.player.markers({
				markerStyle: {
					// 标记样式
					width: '0.7em',
					height: '0.7em',
					bottom: '-0.15em',
					'border-radius': '50%',
					'background-color': timePoint.length > 0 ? 'orange' : '',
					position: 'absolute'
				},
				markerTip: {
					display: false // 显示标记的tip
				},
				markers: this.option.markers
			});
		});
	},
	methods: {
		// 打开全屏
		openFullScreen(id) {
			console.log('打开全屏', id);
			let ele = document.getElementById(id);
			// console.log(this.player, ele);
			// console.log(ele.childNodes[0]);
			ele.childNodes[0].pause();
			this.showFullScreen = true;
			this.player = videojs(this.option.id, {
				controls: true, // 必填，显示各控制组件
				autoplay: false // 是否自动播放
			});
		},
		closeLargeVideo() {
			this.showFullScreen = false;
		}
	},
	beforeDestroy() {
		if (this.player) {
			this.player.dispose();
		}
	}
};
</script>
<style>
/*使播放按钮变圆形*/
.video-js .vjs-big-play-button {
	font-size: 2.5em;
	line-height: 2.3em;
	height: 2.5em;
	width: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	border-radius: 2.5em;
	background-color: #73859f;
	background-color: rgba(115, 133, 159, 0.5);
	border-width: 0.15em;
	margin-top: -1.25em;
	margin-left: -1.75em;
}
/*暂停时也显示播放按钮*/
.vjs-paused.vjs-has-started .vjs-big-play-button {
	display: block;
}
/*将时长倒计时变当前时间和总时长（这两行不能换位置）*/
.video-js .vjs-time-control {
	display: block;
	min-width: 1.2em;
	text-align: center;
	padding: 0;
}
.video-js .vjs-remaining-time {
	display: none;
}
/*hover进度条无放大效果*/
.video-js .vjs-progress-control:hover .vjs-progress-holder {
	font-size: 10px;
}
/*标记放大效果*/
.video-js .vjs-marker:hover {
	font-size: 1.6em;
}
.video-js .vjs-picture-in-picture-control {
	margin-right: 20px !important;
}
.video-js .vjs-tip-inner {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	background-color: rgba(43, 48, 79, 0.9) !important;
	color: #fff !important;
	width: 400px !important;
}
.agent-recorg-text {
	font-size: 13px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	background-color: rgba(0, 0, 0, 0.38);
	color: #ffffff;
	position: absolute;
	top: 4px;
	left: 8px;
	z-index: 10;
	height: 20px;
}
.full-screen {
	position: absolute;
	right: 5px;
	bottom: 6px;
	z-index: 100;
	cursor: pointer;
}
.full-screen img {
	width: 17px;
}
.mark-video-main {
	position: relative;
}
</style>
